<template>
  <el-drawer
    v-model="drawerVisible"
    title="轨迹管理"
    size="60%"
    direction="rtl"
    :before-close="handleClose"
  >
    <div v-if="selectedOrder" class="track-management">
      <!-- 订单信息 -->
      <div class="order-info">
        <h3>订单信息</h3>
        <div class="order-details">
          <div class="detail-item">
            <span class="label">订单号：</span>
            <span class="value">{{ selectedOrder.orderNumber }}</span>
          </div>
          <div class="detail-item">
            <span class="label">当前状态：</span>
            <el-tag :type="getStatusType(selectedOrder.status)" effect="dark">
              {{ selectedOrder.statusText }}
            </el-tag>
          </div>
          <div class="detail-item">
            <span class="label">配送路线：</span>
            <span class="value">{{ selectedOrder.senderAddress }} → {{ selectedOrder.recipientAddress }}</span>
          </div>
        </div>
      </div>

      <!-- 添加轨迹 -->
      <div class="add-track-section">
        <h3>添加新轨迹</h3>
        <TrackForm
          :order-data="orderData"
          :existing-tracks="trackActivities"
          @submit="handleAddTrack"
          @cancel="resetForm"
        />
      </div>

      <!-- 轨迹列表 -->
      <div class="track-list-section">
        <h3>轨迹记录 ({{ trackActivities.length }}条)</h3>
        <TrackList
          :track-activities="trackActivities"
        />
      </div>
    </div>

    <el-empty v-else description="请选择订单" />
  </el-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import TrackForm from './TrackForm.vue'
import TrackList from './TrackList.vue'

interface Order {
  id: string
  orderNumber: string
  senderName: string
  senderPhone: string
  senderAddress: string
  senderCoords?: [number, number]
  recipientName: string
  recipientPhone: string
  recipientAddress: string
  recipientCoords?: [number, number]
  status: number
  statusText: string
  createTime: string
  updateTime: string
  courierName?: string
  estimatedDelivery?: string
}

interface TrackActivity {
  id?: string
  content: string
  timestamp: string
  type: string
  color: string
  location: string
  operator?: string
  remark?: string
  status: number
  coordinates?: [number, number]
}

interface Props {
  visible: boolean
  selectedOrder: Order | null
  trackActivities: TrackActivity[]
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'addTrack', trackData: Omit<TrackActivity, 'id'>): void
  (e: 'updateTrack', trackId: string, trackData: Partial<TrackActivity>): void
  (e: 'deleteTrack', trackId: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const drawerVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 构建订单数据给地图组件使用
const orderData = computed(() => {
  if (!props.selectedOrder) return undefined
  
  return {
    senderAddress: props.selectedOrder.senderAddress,
    recipientAddress: props.selectedOrder.recipientAddress,
    senderCoords: props.selectedOrder.senderCoords,
    recipientCoords: props.selectedOrder.recipientCoords,
  }
})

const getStatusType = (status: number): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const statusTypeMap: Record<number, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    1: 'info',
    2: 'primary',
    3: 'primary',
    4: 'warning', 
    5: 'success'
  }
  return statusTypeMap[status] || 'info'
}

const handleClose = (done: () => void) => {
  done()
}

const handleAddTrack = (trackData: Omit<TrackActivity, 'id'>) => {
  emit('addTrack', trackData)
}

const handleEditTrack = (trackId: string, trackData: Partial<TrackActivity>) => {
  emit('updateTrack', trackId, trackData)
}

const handleDeleteTrack = (trackId: string) => {
  emit('deleteTrack', trackId)
}

const resetForm = () => {
  // 重置表单的逻辑可以在这里实现
}
</script>

<style scoped>
.track-management {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-info {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.order-info h3 {
  margin: 0 0 16px 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  font-weight: 500;
  color: #64748b;
  min-width: 80px;
}

.value {
  color: #1e293b;
  flex: 1;
}

.add-track-section,
.track-list-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.add-track-section h3,
.track-list-section h3 {
  margin: 0 0 16px 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .track-management {
    padding: 0 8px;
  }
  
  .order-info,
  .add-track-section,
  .track-list-section {
    padding: 16px;
  }
  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .label {
    min-width: auto;
  }
}
</style> 